<template>
	<view class="zy-column-full">
		<zy-title rightText="联系客服" @right='toService'></zy-title>
		
		<scroll-view class="zy-scroll">
			<view class="zy-text-white-lg-bold zy-mt-lg zy-ml-lg zy-mb-lg" style="font-size: 42rpx;">成为TeAi会员</view>
			<!-- vip广告图 -->
			<swiper :current="current" previous-margin="60rpx" next-margin="60rpx" @change="changeBanner" >
				<swiper-item style="width: 610rpx; aspect-ratio: 1.8/1; padding-right: 20rpx;box-sizing: border-box;"
				 v-for="(item, index) in vipList" :key="index">
					<view style="position: relative; height: 100%;">
						<image class="zy-pic-bg" :src="getImageUrl(`vip_bg_${index}.png`)"></image>
						<view class="zy-text-white-lg-bold" style="position: absolute; top: 50rpx; left: 30rpx;font-size: 48rpx;" :style="{'color':vipColor[index]}">{{item.keyWord}}</view>
						<view class="zy-row" style="position: absolute; bottom: 30rpx; left: 30rpx">
							<view class="zy-text-yellow-light-lg" style="font-size: 40rpx;" :style="{'color':vipColor[index]}">￥{{item.money}}/</view>
							<view class="zy-text-yellow-light" :style="{'color':vipColor[index]}">月</view>
						</view>
						<view class="zy-btn-white-capsule" style="position: absolute; bottom: 30rpx; right: 50rpx" @click="showDialogPay">成为会员</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 会员特权 -->
			<view class="zy-column zy-ph-lg zy-mt-lg">
				<view class="zy-text-white-lg-bold">会员特权</view>
				<view class="zy-row zy-mt-lg">
					<image class="zy-icon-lg" style="width: 80rpx;" mode="widthFix" :src="getImageUrl(`vip_tq_${current}.png`)" ></image>
					<view class="zy-text-white-lg-bold zy-ml">享受{{vipTitle}}所有权益</view>
				</view>
				<view class="zy-text-white-lg-bold zy-mt-50">{{vipTitle}}更多特权</view>
				<view class="zy-row zy-mt-lg" v-for="(item, index) in listHk" :key="index">
					<image class="zy-img" :src="getImageUrl(`vip_${current}_${index}.png`)"></image>
					<view class="zy-column-center zy-ml-lg">
						<view class="zy-text-white zy-font-bold">{{item.title}}</view>
						<view class="zy-text-whitegrey-sm zy-mt-sm">{{item.sub}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<zy-button class="zy-mh-lg" :content="`成为${vipTitle}`" @click="showDialogPay"></zy-button>
		
		<uni-popup type="bottom" ref="pay">
			<pay payType="2" :payMoney="selectItem.money" :payId="selectItem.id" :vipTitle="selectItem.keyWord" @close="closeDialogPay"></pay>
		</uni-popup>
	</view>
</template>

<script>
    import RouteUtil from '@/main/common/RouteUtil';
	export default {
		data() {
			return {
				current: 1,
				vipTitle: '金卡会员',
				vipList:[],
				vipColor:['#050006', '#050006', '#E7D2A6', '#3E6A7C'],
				listHk:[
					{
						icon:'vip_hk_1.png',
						title: '谁看过我',
						sub: '查看谁偷看你',
					},
					{
						icon:'vip_hk_2.png',
						title: '看的更多',
						sub: '查看微信无次数限制',
					},
					{
						icon:'vip_hk_3.png',
						title: '聊的更久',
						sub: '无限制畅聊',
					},
					{
						icon:'vip_hk_4.png',
						title: '专属人气',
						sub: '迅速提升人气',
					},
					{
						icon:'vip_hk_5.png',
						title: '专属勋章',
						sub: '全平台展示专属身份勋章',
					},
					
				],
				list: [],
				user: {},
				vipTip: 'VIP会员未开通',
				selectIndex: 0,
				selectItem:{}
			}
		},
		onLoad() {
			this.requestVipList();
		},
		onShow() {
			this.requestUser();
		},
		methods: {
			toService(){
				uni.$toast.showToast('跳转客服')
			},
			changeBanner(event){
				this.current = event.detail.current
				this.vipTitle = this.vipList[this.current].keyWord
				this.selectItem = this.vipList[this.current]
			},
			showDialogPay() {
				this.$refs.pay.open()
			},
			closeDialogPay() {
				this.$refs.pay.close()
			},
			requestUser() {
				uni.$http.getUser().then(res=>{
					this.user = res.data;
					if (0 == this.user.vip) {
						this.vipTip = '已开通VIP,' + this.user.vipTime + '到期';
					}
				})
			},
			requestVipList() {
				uni.$http.get('/api/vipPackage/list',{type: 2}).then(res=>{
					this.vipList = res.data;
					if(this.vipList){
						this.vipList.push(this.vipList.shift())
						this.selectItem = this.vipList[1]
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>